<!DOCTYPE html>
<html>
<head>
    <title>Energy Levels Diagram</title>
</head>
<body>
    <canvas id="canvas" width="500" height="600"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

        // Style
        ctx.font = '18px Arial';
        ctx.lineWidth = 1.5;
        ctx.textBaseline = 'middle';

        // Helper for dashed line
        function drawDashedLine(x1, y1, x2, y2) {
            ctx.beginPath();
            ctx.setLineDash([4, 4]);
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.stroke();
            ctx.setLineDash([]); // Reset
        }

        // Y-axis
        const axisX = 100;
        const axisYTop = 50;
        const axisYBottom = 550;
        ctx.beginPath();
        ctx.moveTo(axisX, axisYBottom);
        ctx.lineTo(axisX, axisYTop);
        // Arrowhead
        ctx.moveTo(axisX, axisYTop);
        ctx.lineTo(axisX - 6, axisYTop + 12);
        ctx.moveTo(axisX, axisYTop);
        ctx.lineTo(axisX + 6, axisYTop + 12);
        ctx.stroke();

        // Y-axis label
        ctx.save();
        ctx.textAlign = 'center';
        ctx.fillText('energy / eV', 45, (axisYTop + axisYBottom) / 2);
        ctx.restore();

        // --- Energy Levels ---
        const lineStartX = 120;

        // Level -13.6
        const y_13_6 = 520;
        const xEnd_13_6 = 350;
        ctx.beginPath();
        ctx.moveTo(lineStartX, y_13_6);
        ctx.lineTo(xEnd_13_6, y_13_6);
        ctx.stroke();
        drawDashedLine(lineStartX, y_13_6, lineStartX - 50, y_13_6);
        ctx.textAlign = 'right';
        ctx.fillText('-13.6', lineStartX - 60, y_13_6);
        ctx.textAlign = 'start';

        // Level -3.40
        const y_3_40 = 340;
        const xEnd_3_40 = 350;
        ctx.beginPath();
        ctx.moveTo(lineStartX, y_3_40);
        ctx.lineTo(xEnd_3_40, y_3_40);
        ctx.stroke();
        drawDashedLine(xEnd_3_40, y_3_40, xEnd_3_40 + 50, y_3_40);
        ctx.fillText('-3.40', xEnd_3_40 + 60, y_3_40);

        // Level -1.50
        const y_1_50 = 250;
        const xEnd_1_50 = 300;
        ctx.beginPath();
        ctx.moveTo(lineStartX, y_1_50);
        ctx.lineTo(xEnd_1_50, y_1_50);
        ctx.stroke();
        drawDashedLine(lineStartX, y_1_50, lineStartX - 50, y_1_50);
        ctx.textAlign = 'right';
        ctx.fillText('-1.50', lineStartX - 60, y_1_50);
        ctx.textAlign = 'start';
        
        // Level -0.85
        const y_0_85 = 200;
        const xEnd_0_85_solid = 300;
        ctx.beginPath();
        ctx.moveTo(lineStartX, y_0_85);
        ctx.lineTo(xEnd_0_85_solid, y_0_85);
        ctx.stroke();
        // Angled connector
        ctx.beginPath();
        ctx.moveTo(xEnd_0_85_solid, y_0_85);
        ctx.lineTo(xEnd_0_85_solid + 20, y_0_85 + 10);
        ctx.stroke();
        // Dashed line
        drawDashedLine(xEnd_0_85_solid + 20, y_0_85 + 10, xEnd_0_85_solid + 70, y_0_85 + 10);
        ctx.fillText('-0.85', xEnd_0_85_solid + 80, y_0_85 + 10);

        // Top cluster of four lines
        const xEndTop = 380;
        const y_0_54 = 120;
        const y_l2 = y_0_54 - 10;
        const y_l3 = y_l2 - 5;
        const y_0_38 = y_l3 - 5;
        
        // Line for -0.54 (bottom of cluster)
        ctx.beginPath();
        ctx.moveTo(lineStartX, y_0_54);
        ctx.lineTo(xEndTop, y_0_54);
        ctx.stroke();
        drawDashedLine(lineStartX, y_0_54, lineStartX - 50, y_0_54);
        ctx.textAlign = 'right';
        ctx.fillText('-0.54', lineStartX - 60, y_0_54);
        ctx.textAlign = 'start';
        
        // Middle two lines
        ctx.beginPath();
        ctx.moveTo(lineStartX, y_l2);
        ctx.lineTo(xEndTop, y_l2);
        ctx.moveTo(lineStartX, y_l3);
        ctx.lineTo(xEndTop, y_l3);
        ctx.stroke();

        // Line for -0.38 (top of cluster)
        ctx.beginPath();
        ctx.moveTo(lineStartX, y_0_38);
        ctx.lineTo(xEndTop, y_0_38);
        ctx.stroke();
        drawDashedLine(xEndTop, y_0_38, xEndTop + 50, y_0_38);
        ctx.fillText('-0.38', xEndTop + 60, y_0_38);

        // Figure caption
        ctx.textAlign = 'center';
        ctx.fillText('Fig. 11.1 (not to scale)', 270, 580);
    </script>
</body>
</html>